import React, { useState, useEffect } from 'react';
import { Modal, Radio } from 'antd';

interface StatusModalProps {
  visible: boolean;
  onClose: () => void;
  onSubmit: (newStatus: string) => void;
  order: any; // 接收订单信息
}

export const StatusModal: React.FC<StatusModalProps> = ({ visible, onClose, onSubmit, order }) => {
  const [selectedStatus, setSelectedStatus] = useState('');

  useEffect(() => {
    if (order) {
      setSelectedStatus(order.status.toString()); // 设置初始状态为订单的当前状态
    } else {
      setSelectedStatus(''); // 如果没有订单信息，重置状态
    }
  }, [order]); // 当订单信息变化时更新状态

  const handleModalSubmit = () => {
    onSubmit(selectedStatus);
    onClose(); // 提交后关闭弹窗
  };

  return (
    <Modal
      title="修改订单状态"
      visible={visible}
      onCancel={onClose}
      onOk={handleModalSubmit}
    >
      {order && (
        <div>
          <p>订单号: {order.orderNumber}</p>
          <p>商品名称: {order.prodName}</p>
          {/* 其他订单信息 */}
        </div>
      )}
      <Radio.Group onChange={(e) => setSelectedStatus(e.target.value)} value={selectedStatus}>
        <Radio.Button value="0">待支付</Radio.Button>
        <Radio.Button value="1">已发货</Radio.Button>
        <Radio.Button value="2">已完成</Radio.Button>
      </Radio.Group>
    </Modal>
  );
};
